<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>
		<div id="app">
			<header>
				<ul>
					<li><img src="img/主页_files/classifyImage.png" /></li>
					<li><button>搜索</button><input type="text" name="" id="" value="天猫超市  一站式" /></li>
					<li><img src="img/主页_files/shoppingcartImega.png" /><span>北京</span></li>
				</ul>
			</header>
			<div class="content">
				<!--swiper-container容器-->
				<div class="swiper-container">
					<!--swiper-wrapper包装-->
					<div class="swiper-wrapper">
						<!--swiper-slide可滑动项,{一个滑动项一个图-->
						<div class="swiper-slide"><img src="img/主页_files/a1.png" alt="" /></div>
						<div class="swiper-slide"><img src="img/主页_files/a2.png" alt="" /></div>
						<div class="swiper-slide"><img src="img/主页_files/a3.png" alt="" /></div>
						<div class="swiper-slide"><img src="img/主页_files/a4.png" alt="" /></div>
						<div class="swiper-slide"><img src="img/主页_files/a5.png" alt="" /></div>
					</div>
					<!--分页就是小圆点-->
					<div class="swiper-pagination" style="bottom: -25px;"></div>
					<!--导航按钮左右按钮-->
					<!--<div class="swiper-button-prev"></div>
					<div class="swiper-button-next"></div>-->
				</div>
				<div class="header">
					<ul>
						<li index="0"><a><img src="img/主页_files/1.png"/><p>母婴玩具</p></a></li>
						<li index="1"><a><img src="img/主页_files/2.png"/><p>母婴玩具</p></a></li>
						<li index="2"><a><img src="img/主页_files/3.png"/><p>母婴玩具</p></a></li>
						<li index="3"><a><img src="img/主页_files/4.png"/><p>母婴玩具</p></a></li>
						<li index="4"><a><img src="img/主页_files/5.png"/><p>母婴玩具</p></a></li>
					</ul>
					<ul>
						<li index="5"><a><img src="img/主页_files/6.png"/><p>母婴玩具</p></a></li>
						<li index="6"><a><img src="img/主页_files/7.png"/><p>母婴玩具</p></a></li>
						<li index="7"><a><img src="img/主页_files/8.png"/><p>母婴玩具</p></a></li>
						<li index="8"><a><img src="img/主页_files/9.png"/><p>母婴玩具</p></a></li>
						<li index="9"><a><img src="img/主页_files/10.png"/><p>母婴玩具</p></a></li>
					</ul>
				</div>
				<div class="zhong">
					<div>
						<div>
							<img src="img/主页_files/cont_03.png"/>
							<p>12点场剩余时间</p>
							
							<!---->
						</div>
						<div>
							<div>
								<p>生鲜区</p>
								<p>买二免一</p>
								<p>爆款直降</p>
							</div>
						</div>
						<div>
							<img src="img/主页_files/shengxian.png"/>
							<div class="fh">
								<p>￥37.6</p>
								<p>一份</p>
							</div>
						</div>
					</div>
					<div>
						<div>
							<!--<p>
								<span >00天</span> 
								<span >00时</span>
								<span >00分</span>
								<span id="t_s">00秒</span>
							</p>-->
							<p  class="time" style=" height: 30px;width: 300px;display: flex;">
								<span id="t_d">0</span>:
								<span id="t_h">0</span>:
								<span id="t_m">0</span>:
								<span id="t_s">0</span>

							</p>
							<img src="img/主页_files/zhijin.png" alt="" />
							<div class="fh">
								<p>一元起</p>
							</div>
						</div>
						<div>
							<ul>
								<li><p>好货</p><p>超市热卖</p><img src="img/主页_files/cont_12.png"/></li>
								<li><p>量贩装</p><p>仅2.2元/盒</p><img src="img/主页_files/cont_14.png"/></li>
								<li><p>9元馆</p><p>抢优品</p><img src="img/主页_files/cont_16.png"/></li>
							</ul>
						</div>
					</div>
					<div>
						<div>
							<img src="img/主页_files/cont_03.png" alt="" />
							<p>买贵赔十倍></p>
						</div>
						<div>
							<ul>
								<li><img src="img/主页_files/cont_23.png"/></li>
								<li><img src="img/主页_files/cont_25.png"/></li>
								<li><img src="img/主页_files/cont_26.png"/></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<footer>
				<ul>
					<li><a href="#"><img src="img/主页_files/JJ_03.png"/><p>首页</p></a></li>
					<li><a href="#"><img src="img/主页_files/JJ_05.png"/><p>物流</p></a></li>
					<li><a href="shopping.html"><img src="img/主页_files/JJ_07.png"/><p>购物车</p></a></li>
					<li><a href="personal.html"><img src="img/主页_files/JJ_09.png"/><p>我的淘宝</p></a></li>
					<li><a href="#"><img src="img/主页_files/JJ_11.png"/><p>更多</p></a></li>
				</ul>
			</footer>
		</div>
		
	</body>
	<script type="text/javascript">
		(function() {
			size();
			window.onresize = function() {
				size();
			}

			function size() {
				var winW = document.documentElement.clientWidth || document.body.clientWidth;
				document.documentElement.style.fontSize = (winW / 320) * 100 + "px";
			}
		})()
		setTimeout(function() {
		    var mySw = new Swiper(".swiper-container", {
		        loop: true,
		        autoplay: 1000,
		        pagination: ".swiper-pagination"
		    })
		}, 100)
		
			
	$('.header>ul>li').click(function(){
	    //获取元素的index属性值
		var num=$(this).attr('index');
		//储存 选项的index值 储存在sessionStorage 中
		sessionStorage.setItem('num',num);
		//页面跳转到选项 页
		location.href="option.html";
	})
		
	//var t=1800000;//
    function GetRTime() {
      var EndTime = new Date('2017/10/10 00:00:00');//创建指定的时间
      var NowTime = new Date();//获取现在时间
      //var t = EndTime.getTime() - NowTime.getTime();//
      var t = EndTime - NowTime;// 时间可以相减 表示所间隔的毫秒数
        //  console.log(t);//27343600 毫秒


       // t-=1000;
    var d = 0;
    var h = 0;
    var m = 0;
    var s = 0;
    if (t >= 0) {
        d = Math.floor(t / 1000 / 60 / 60 / 24);//2.56785 天
        h = Math.floor(t / 1000 / 60 / 60 % 24);//总的小时 对 24取余 为不足一天的小时数
        m = Math.floor(t / 1000 / 60 % 60);//总的分钟数 对 60 取余  为不足1小时的分钟数
        s = Math.floor(t / 1000 % 60);//总秒数 对60取余 得到不足1分钟的秒数
    }
    document.getElementById("t_d").innerHTML = d ;
    document.getElementById("t_h").innerHTML = h ;
    document.getElementById("t_m").innerHTML = m ;
    document.getElementById("t_s").innerHTML = s;
}
 setInterval(GetRTime, 1000);	
	
	</script>

</html>